<template>
    <CrudPage
        :columns="columns"
        :initialFormData="initialFormData"
        v-model:formData="formData"
        :getApi="getGoodsColorApi"
        :createApi="createGoodsColorApi"
        :updateApi="updateGoodsColorApi"
        :deleteApi="deleteGoodsColorApi"
        :form="form"
        :scroll="false"
    />
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import CrudPage from "@/components/CrudPage.vue";
import { getGoodsColorApi, updateGoodsColorApi, deleteGoodsColorApi, createGoodsColorApi } from "@/api/goods";
export default defineComponent({
    components: {
        CrudPage,
    },
    setup() {
        const initialFormData = {
            color_name: "",
            color_value: "",
            status: 1,
        };
        const columns = [
            {
                dataIndex: "color_name",
                title: "颜色名",
                fixed: "left",
                type: "input",
            },
            {
                dataIndex: "color_value",
                title: "颜色值",
                type: "input",
            },
            {
                dataIndex: "status",
                title: "状态",
                customRender: ({ text }: { text: number }) => (text ? "可用" : "不可用"),
            },
            {
                dataIndex: "_id",
                title: "ID",
            },
            {
                dataIndex: "operation",
                title: "操作",
                fixed: "right",
            },
        ];
        const state = reactive({
            formData: { ...initialFormData },
        });
        const form = reactive(columns.filter(item => item.type));
        return {
            columns,
            getGoodsColorApi,
            updateGoodsColorApi,
            deleteGoodsColorApi,
            createGoodsColorApi,
            initialFormData,
            form,
            ...toRefs(state),
        };
    },
});
</script>

<style scoped lang="scss"></style>
